<template>
  <div>
    <NavBar/>
    <div class="container">
      <div class="pay">
        <div class="pay-h">
          <b class="ftz16">支付订单</b>
          <p>产品名称：{{planInfo.name}}</p>
          <p>服务期限：{{planInfo.beginTime | parseTime('{y}-{m}-{d}')}} 至 {{planInfo.endTime | parseTime('{y}-{m}-{d}')}}</p>
          <p>价格：{{planInfo.price}}中亿币</p>
        </div>
        <div class="pay-c">
          <div class="pay-way">
            <!-- <label><input type="radio" name="pay" value="alipay" v-model="payType" :checked="payType==='alipay'">
              <span class="zfb"></span>
            </label> -->
            <!-- <label><input type="radio" name="pay" value="weixin" v-model="payType" :checked="payType==='weixin'"><span class="wx"></span></label> -->
            <label><input type="radio" name="pay" value="wallet" v-model="payType" :checked="payType==='wallet'" :disabled="balance < planInfo.price">
              <span>我的钱包：
                <i class="icon-coin"></i>{{parseFloat(balance)}}</span>
            </label>

          </div>
          <div class="info">
            <span>用户名：{{me.sysUser.userAccount}}</span>
            <p>
              <label>
                <input type="checkbox" :checked="checkedRiskBook" id="agree" v-model="checkedRiskBook">
                <span>我已仔细阅读并接受
                  <a href="javascript:void(0)" @click="showRiskDisclosureFlag = true">《风险揭示书》</a>
                  <a href="javascript:void(0)" @click="showAgreementFlag = true">《中亿理投师付费/免费服务使用协议》</a>
                </span>
              </label>
              <span class="fr pay-btn">
                订单金额：
                <i class="ftz20">
                  <span class="icon-coin"></span>{{parseFloat(planInfo.price)}}</i>
                <button id="pay_sub" :class="{'no':!checkedRiskBook || paying}" @click="payEvent()">立即支付</button>
              </span>
            </p>
            <div class="tips">
              <span class="icon"></span>提示：支付过程中遇到问题，请致电：
              <i>400-022-9972</i>。
            </div>
          </div>
        </div>
      </div>
    </div>
    <Agreement typeName="agreement" v-if="showAgreementFlag" @closeFn="closeAgreementBox" />
    <Agreement typeName="riskDisclosure" v-if="showRiskDisclosureFlag" @closeFn="closeRiskDisclosureBox" />
    <Footer/>
  </div>

</template>

<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import { mapState } from 'vuex'
import Agreement from '@/components/agreement/agreement'
import {
  getPlanSimpleInfo,
  orderPlan,
  getWallet
} from '@/service/api'
export default {
  components: {
    NavBar,
    Footer,
    Agreement
  },
  computed: {
    ...mapState({
      me: state => state.me
    })
  },
  data () {
    return {
      checkedRiskBook: false,
      payType: 'wallet',
      planInfo: {},
      balance: 0.00,
      showAgreementFlag: false,
      showRiskDisclosureFlag: false,
      paying: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.showLoadingModal()
      this.initData()
    })
  },
  methods: {
    showLoadingModal () {
      if (window.layer) {
        this.layerLoad = window.layer.load(0, {
          shade: false
        })
      }
    },
    closeLoadingModal () {
      if (window.layer) {
        window.layer.close(this.layerLoad)
      }
    },
    initData () {
      Promise.all([
        this.getPlanInfo(),
        this.getMyWalletInfo()
      ]).then((res) => {
        this.closeLoadingModal()
        // 计划详情
        let detailData = res[0]
        if (detailData.status === 200) {
          let tempDetailData = detailData.data
          if (tempDetailData.data) {
            this.planInfo = tempDetailData.data
          }
        } else {
          this.msgTips('计划详情')
        }
        // 计划详情
        let walletData = res[1]
        if (walletData.status === 200) {
          let tempData = walletData.data
          if (tempData) {
            this.balance = tempData.income
          }
        }
      })
    },
    // 计划详情
    async getPlanInfo () {
      const searchInfo = {
        planId: this.$route.params.id,
        pageSize: 1,
        pageNum: 1
      }
      let res = await getPlanSimpleInfo(searchInfo)
      return res
    },
    // 获取我的钱包信息
    async getMyWalletInfo () {
      let res = await getWallet({})
      return res
    },
    payEvent () {
      let that = this
      window.layer.open({
        title: '提示',
        btn: ['确定', '取消'],
        class: 'wallet',
        skin: 'report walletTip',
        type: 1,
        btnAlign: 'c',
        content: '确定支付？',
        yes: function (index, layero) {
          that.doPay()
          // if (window.layer) {
          //   window.layer.closeAll()
          // }
        }
      })
    },
    async doPay () {
      // 钱包支付但是余额不足
      if (this.payType === 'wallet' && this.balance < this.planInfo.price) {
        if (window.layer) {
          window.layer.closeAll()
        }
        this.msgTips('钱包可用余额不足，请选择其他支付方式')
        return false
      }
      // if (this.paying) {
      //   this.msgTips('信息提交中，请等待')
      //   return false
      // }
      this.paying = true
      this.showLoadingModal()
      let info = {
        businessId: this.planInfo.planId,
        payType: this.payType,
        amount: this.planInfo.price
      }
      try {
        let res = await orderPlan(info)
        window.layer.closeAll()
        if (this.payType === 'wallet') {
          this.closeLoadingModal()
          if (res.data === '') {
            this.msgTips('购买成功，2s后返回上一页面')
            setTimeout(() => {
              this.paying = false
              this.$router.go(-1)
            }, 2000)
          } else {
            this.msgTips('购买失败，' + res.data.msg)
          }
          return false
        }
        if (res.data) {
          this.paying = false
          this.closeLoadingModal()
          let str = res.data.replace(/\\"/g, '"')
          var newwindow = window.open('', '_self', '')
          newwindow.document.write(str)
        }
      } catch (e) {
        console.log(e)
        window.layer.closeAll()
      }
    },
    msgTips (tips) {
      window.layui.layer.msg(tips)
    },
    closeAgreementBox () {
      this.showAgreementFlag = false
    },
    closeRiskDisclosureBox () {
      this.showRiskDisclosureFlag = false
    }
  }
}
</script>
<style lang="scss">
.walletTip .layui-layer-content {
  padding: 30px 60px !important;
}
</style>

<style scoped lang="scss">
$icon: "../../assets/res/img/icon.png";
.container {
  min-height: auto;
}
.pay {
  width: 936px;
  height: 400px;
  padding: 40px;
  background: #fff;
  margin: 40px auto;
}
.pay .pay-h p {
  display: block;
  height: 14px;
  line-height: 14px;
  border-left: 3px solid #f23e3e;
  margin-top: 20px;
  padding-left: 8px;
}
.pay .pay-h {
  padding: 0 30px 34px 30px;
  border-bottom: 1px solid #e6e6e6;
}

.pay .pay-c {
  padding: 0 30px;
}

.pay .pay-way {
  margin-top: 34px;
}
.pay .pay-way input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-progress-appearance: none;
  width: 22px;
  height: 22px;
  display: inline-block;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: -16px -324px;
  vertical-align: middle;
  cursor: pointer;
}
.pay .pay-way input[type="radio"]:checked {
  background-position: -56px -324px;
}
.pay .pay-way span {
  display: inline-block;
  // vertical-align: middle;
  // width: 156px;
  // height: 46px;
  line-height: 48px;
  margin: 0 48px 0 14px;
  color: #808080;
  background-repeat: no-repeat;
  cursor: pointer;
}
.pay .pay-way .zfb {
  background-image: url($icon);
  background-position: 0 -196px;
  border: 1px solid #e6e6e6;
}
.pay .pay-way .wx {
  background-image: url($icon);
  background-position: 0 -258px;
  border: 1px solid #e6e6e6;
}
.pay .pay-c .info {
  margin-top: 30px;
}
.pay .pay-c .info p span {
  color: #808080;
}
.pay .pay-c .info p {
  margin-top: 30px;
  display: block;
  width: 100%;
}
.pay .pay-c .info a {
  color: #3780d9;
}
.pay .pay-c .info .pay-btn {
  color: #484848;
  margin-top: -12px;
}
.pay .pay-c .info .pay-btn i {
  color: #eb4400;
  font-weight: bold;
  margin-right: 10px;
}
.pay .pay-c .info .pay-btn button {
  color: #fff;
  width: 86px;
  height: 40px;
  background: #eb4400;
  border-radius: 20px;
}
.pay .pay-c .info .pay-btn .no {
  background-color: #a6a6a6;
  pointer-events: none;
}
.pay .pay-c .info input[type="checkbox"] {
  appearance: none;
  -moz-appearance: none;
  -ms-progress-appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: -18px -367px;
  cursor: pointer;
}
.pay .pay-c .info input[type="checkbox"]:checked {
  background-position: -58px -367px;
}
.pay .pay-c .info .tips {
  margin-top: 26px;
  height: 36px;
  line-height: 36px;
  background: #fff4eb;
  padding: 0 10px;
  color: #fd9927;
}
.pay .pay-c .info .tips i {
  color: #eb4400;
}
.pay .pay-c .info .tips .icon {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: -18px -408px;
  margin-right: 4px;
}
</style>
